<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./static/fav.png">
    <title>EPassword</title>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/index.css">

    <script src="./static/js/encrypto.js"></script>
    <script src="./static/js2/user.js"></script>
    <script src="./static/js/common.js"></script>
</head>
<body>
<div id="app" v-clock @click="appClick">
    <!-- header -->
    <div class="app-header" >
        <div class="header-left">
            <span class="navbar-item active">Password</span>
            <a class="navbar-item" href="./bookmark.html">Bookmark</a>
            <a class="navbar-item" href="./help.html">Help</a>
        </div>

        <div class="header-right">
            <div class="global-filter">
                <input type="search" class="input-search" style="width: auto;" v-model="filterKeyword" placeholder="Search By Item Title">
                <ul class="filter-ul" v-if="filterList.length > 0">
                    <li v-for="item in filterList" v:key="item.id" @click="toItem(item)">{{ item.name }}</li>
                </ul>
            </div>
            <button class="btn btn-primary" v-if="ENV == ENV_SERVER" @click="saveToLocalhost">Save To File</button>
            <a id="server-link" class="navbar-item" href="http://localhost:5020/" target="_blank" v-if="ENV == ENV_FILE">localhost:5020</a>
            <div class="navbar-item app-username">
                <div id="app-username">{{ username }}</div>
                <list class="app-header-dropdown">
                    <li id="to-login">Logout</li>
                </list>
            </div>
        </div>
    </div>

    <!-- company select list -->
    <ul class="compay-list" v-show="companyListVisible == true" @click.stop >
        <li v-for="(company, index) in companys" :key="index" 
            :class="{active: company.id == currentCompanyId }"
            @click="changeCompany(company.id)">
            <span class="flex-main">{{ company.name }}</span>
            <span class="bm-operator" @click.stop="submitEditCompany(company)" title="Update Company"></span>
        </li>
    </ul>

    <!-- toast -->
    <div class="toast" id="app-toast" :class="{active: toastVisible}">
        <em class="iconfont icon-info"></em>
        <span>{{ toastContent }}</span>
    </div>

    <!-- sliderbar -->
    <div class="slidebar">
        <!-- Company -->
        <div class="slidebar-menu-title">
            <span class="flex-main">Company</span>
            <span class="bm-add" @click.stop="submitAddCompany" title="Add Company"></span>
        </div>
        <div @click.stop="companyListVisible = true;" class="slidebar-item">
            <span class="flex-main">{{ currentCompany ? currentCompany.name : "" }}</span>
            <span class="arrow-down"></span>
        </div>

        <!-- Project -->
        <div class="slidebar-menu-title">
            <span class="flex-main">Project</span>
            <!-- <input type="search" class="flex-main input-search" v-model="searchedProject"> -->
            <span class="bm-add" @click.stop="submitAddProject(currentCompany.id)" title="Add Project"></span>
        </div>
        <ol id="projects" class="slidebar-menu flex-main">
            <li v-for="(project, index) in currentProjects" :key="index" 
                v-show="!searchedProject || project.name.toLowerCase().indexOf(searchedProject.toLowerCase()) >= 0"
                :class="{active: project.id == currentProjectId}">
                <a href="javascript:;" @click="changeProject(project.id)" class="slidebar-item">
                    <span style="margin-right: 5px;">{{ index + 1 }}.</span>
                    <span class="flex-main">{{ project.name }}</span>
                    <span class="hover-show bm-add" @click.stop="submitAddItem(project.id)" title="Add Item"></span>
                    <span class="hover-show bm-operator" @click.stop="submitUpdateProject(project)" title="Update Project"></span>
                </a>
            </li>
        </ol>
    </div>

    <!-- main -->
    <div class="page-main">
        <table class="table" v-clock>
            <col width="60">
            <col width="140">
            <col width="auto">
            <col width="60">
            <thead>
                <tr>
                    <th>Order</th>
                    <th>
                        <span>Title</span>
                        <input type="search" class="input-search" v-model="searchedItemName">
                    </th>
                    <th>Content</th>
                    <th><span class="hover-show bm-add" @click.stop="submitAddItem()" title="Add Item"></span></th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in currentItems" v-show="item.name && item.name.toLowerCase().indexOf(searchedItemName.toLowerCase()) >= 0">
                    <td>{{ item.orders }}</td>
                    <td>
                        <a class="outer-link" :data-href="item.url" target="_blank">{{ item.name }}</a>
                    </td>
                    <td>
                        <pre v-html="toHTML(item.content)"></pre>
                    </td>
                    <td>
                        <span class="bm-operator" @click="submitUpdateItem(item)"></span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- company popup -->
    <div class="popup-wrap" :class="{'popup-showed': companyVisible}">
        <div class="popup-bg" @click="hideCompany"></div>
        
        <div class="popup"> 
            <div class="popup-hd"> 
                <h5 class="popup-title">{{ companyDoing == "edit" ? "Edit" : "Add"}} Company</h5>
                <span class="iconfont" :class="{'icon-add-copy': companyDoing == 'add', 'icon-xiugai': companyDoing == 'edit'}"></span>
            </div>

            <div class="popup-bd">
                <div class="form-group">
                    <div class="form-label">Name:</div>
                    <input type="text" class="form-control" v-model="modifyComapny.name" placeholder="Please Input Company Name">
                </div>
                <div class="form-group">
                    <div class="form-label">Order:</div>
                    <input type="number" class="form-control" v-model="modifyComapny.orders" placeholder="Please Input Company Order">
                </div>
            </div>

            <div class="popup-ft">
                <button class="btn btn-warn" type="button" v-if="companyDoing == 'edit'" @click="deleteCompany">Delete</button>
                <button class="btn btn-primary" type="button" v-if="companyDoing == 'edit'" @click="saveCompany">Update</button>
                <button class="btn btn-primary" type="button" v-if="companyDoing == 'add'" @click="addCompany">Add</button>
                <button class="btn btn-info" type="button" @click="hideCompany">Cancel</button>
            </div>
        </div>
    </div> 

    <!-- project popup -->
    <div class="popup-wrap" :class="{'popup-showed': projectVisible}">
        <div class="popup-bg" @click="hideProject"></div>
        
        <div class="popup"> 
            <div class="popup-hd"> 
                <h5 class="popup-title">{{ projectDoing == "edit" ? "Edit" : "Add"}} Project</h5>
                <span class="iconfont" :class="{'icon-add-copy': projectDoing == 'add', 'icon-xiugai': projectDoing == 'edit'}"></span>
            </div>

            <div class="popup-bd">
                <div class="form-group" v-if="currentCompany">
                    <div class="form-label">Company:</div>
                    <select v-model="modifyProject.cId" class="form-control">
                        <option v-for="(company, index) in companys" :key="index" :value="company.id">{{ company.name }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="form-label">Name:</div>
                    <input type="text" class="form-control" v-model="modifyProject.name" placeholder="Please Input Project Name">
                </div>
                <div class="form-group">
                    <div class="form-label">Order:</div>
                    <input type="number" class="form-control" v-model="modifyProject.orders">
                </div>
            </div>

            <div class="popup-ft">
                <button class="btn btn-warn" type="button" v-if="projectDoing == 'edit'" @click="deleteProject">Delete</button>
                <button class="btn btn-primary" type="button" v-if="projectDoing == 'edit'" @click="updateProject">Update</button>
                <button class="btn btn-primary" type="button" v-if="projectDoing == 'add'" @click="addProject">Add</button>
                <button class="btn btn-info" type="button" @click="hideProject">Cancel</button>
            </div>
        </div>
    </div> 

    <!-- item popup -->
    <div class="popup-wrap" :class="{'popup-showed': itemVisible}">
        <div class="popup-bg" @click="hideItem"></div>
        
        <div class="popup" style="width: 1000px;"> 
            <div class="popup-hd"> 
                <h5 class="popup-title">{{ itemDoing == "edit" ? "Edit" : "Add"}} Item</h5>
                <span class="iconfont" :class="{'icon-add-copy': itemDoing == 'add', 'icon-xiugai': itemDoing == 'edit'}"></span>
            </div>

            <div class="popup-bd">
                <div class="form-group" v-if="currentCompany">
                    <div class="form-label">Company:</div>
                    <span>{{ currentCompany.name }}</span>
                </div>

                <div class="form-group" v-if="currentProject">
                    <div class="form-label">Project:</div>
                    <select v-model="modifyItem.pId" class="form-control">
                        <optgroup v-for="company in companyList" :label="company.name">
                            <option v-for="project in company.projectList" :value="project.id">{{ project.name }}</option>
                        </optgroup>
                    </select>
                </div>

                <div class="form-group">
                    <div class="form-label">Name:</div>
                    <input type="text" class="form-control" v-model="modifyItem.name">
                </div>
                <div class="form-group">
                    <div class="form-label">Link:</div>
                    <input type="text" class="form-control" v-model="modifyItem.url">
                </div>
                <div class="form-group">
                    <div class="form-label">Content:</div>
                    <textarea type="text" class="form-control js-textarea" v-model="modifyItem.content" 
                        oninput="this.style.height = this.scrollHeight + 2 + 'px'"></textarea>
                </div>
                <div class="form-group">
                    <div class="form-label">Order:</div>
                    <input type="number" class="form-control" v-model="modifyItem.orders">
                </div>
            </div>

            <div class="popup-ft">
                <button class="btn btn-warn" type="button" v-if="itemDoing == 'edit'" @click="deleteItem">Delete</button>
                <button class="btn btn-primary" type="button" v-if="itemDoing == 'edit'" @click="updateItem">Update</button>
                <button class="btn btn-primary" type="button" v-if="itemDoing == 'add'" @click="addItem">Add</button>
                <button class="btn btn-info" type="button" @click="hideItem">Cancel</button>
            </div>
        </div>
    </div> 
</div>
<div id="mermaid-container" style="position: relative; top: -800px;display: none;">
    <div class="mermaid">
        graph LR
         A --- B
         B-->C[fa:fa-ban forbidden]
         B-->D(fa:fa-spinner);
   </div>
</div>


<script src="./static/js/markdown.js"></script>
<script src="./static/js/mermaid.min.js"></script>

<script src="./static/js/vue.min.js"></script>

<script src="./static/js2/company.js"></script>
<script src="./static/js2/project.js"></script>
<script src="./static/js2/item.js"></script>

<script src="./static/js/index.js"></script>

</body>
</html>
